<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>HTML &lt;div&gt; 标签</h1>

    <h2>定义与用法</h2>

    <h3>参考链接</h3>
    <p><a target="_blank" href="https://www.w3school.com.cn/tags/tag_body.asp">HTML &lt;div&gt; 标签</a></p>

    <h3>摘抄</h3>

    <p>&lt;div&gt; 可定义文档中的分区或节（division/section）。</p>
    <p>&lt;div&gt; 标签可以把文档分割为独立的、不同的部分。</p>
    <p>&lt;div&gt; 是一个块级元素。这意味着它的内容自动地开始一个新行。</p>


    <h3>示例</h3>

    <h4>展示效果</h4>

    <div style="background-color: red; width: 200px; height: 200px;">
        <span>我是第一个Div方块</span>
    </div>

    <div style="background-color: green; width: 300px; height: 100px;">
        <span>我是第二个Div方块</span>
    </div>

    <h4>具体代码</h4>

    <pre>
&lt;!-- style中为Css样式内容，用于修改div的展示效果，具体参见CSS分栏--&gt;
&lt;div style=&quot;background-color: red; width: 200px; height: 200px;&quot;&gt;
    &lt;span&gt;我是第一个Div方块&lt;/span&gt;
&lt;/div&gt;

&lt;div style=&quot;background-color: green; width: 300px; height: 100px;&quot;&gt;
    &lt;span&gt;我是第二个Div方块&lt;/span&gt;
&lt;/div&gt;
    </pre>
</body>

</html>